<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { FormInstance } from 'element-plus/es/components/form'
import { getDictionaryAPI } from '@/api/common'
// 证件类型数据
const dictionayData = ref<any>([])
/** 获取证件类型 */
const getDictionary = async (dictCode: string) => {
  const { data: res } = await getDictionaryAPI(dictCode)
  if (res.code !== 200) return ElMessage.error(res.messsage)
  dictionayData.value = res.data
}
onMounted(() => {
  getDictionary('CertificatesType')
})
// 提交参数
import { userInfo } from '../composables/userInfo'
// 校验规则
import { rules } from '../composables/validate'

const upload = ref() // 上传组件实例
/** 超出数量的钩子 */
const exceedhandler = () => {
  ElMessage.error('只能上传一张图片')
}
/** 图片上传成功钩子 */
const successhandler = (response: any): void => {
  if (response.code !== 200) {
    ElMessage.error('上传失败')
    upload.value?.clearFiles()
  } else {
    userInfo.certificatesUrl = response.data
  }
}
// 上传图片预览数据
const preview = ref<string>('')
// 控制预览对话框显示与隐藏
const imgVisible = ref<boolean>(false)
/** 图片预览钩子 */
const previewhandler = (uploadFile: any) => {
  preview.value = uploadFile.url
  imgVisible.value = true
}
// 监听关闭预览对话框事件
const onClose = () => {
  preview.value = ''
}
/** 删除钩子 */
const removehandler = () => {
  preview.value = ''
  userInfo.certificatesUrl = ''
}
// 表单实例
const formRef = ref<FormInstance>()
/** 重写 */
const rewrite = () => {
  formRef.value?.resetFields()
  upload.value?.clearFiles()
}
import { memberOfCertificationAPI } from '@/api/auth'
import { useOrderStore } from '@/store/modules/orderStore'
const orderStore = useOrderStore()
/** 提交：会员认证 */
const memberOfCertification = () => {
  console.log(userInfo)
  formRef.value?.validate(async (valid) => {
    if (!valid) return
    const { data: res } = await memberOfCertificationAPI(userInfo)
    if (res.code !== 200) return ElMessage.error(res.message)
    ElMessage.success('认证成功')
    orderStore.membershipInformation()
  })
}
</script>

<template>
  <el-card shadow="never">
    <template #header>
      <div>
        <span>实名认证</span>
      </div>
    </template>
    <el-alert
      title="完成实名认证后才能添加就诊人，正常进行挂号，为了不影响后续步骤，建议提前实名认证。"
      type="info"
      center
      show-icon
      :closable="false"
    />
    <el-form ref="formRef" :model="userInfo" :rules="rules" label-width="80px" style="width: 50%; margin: 0 auto">
      <el-form-item label="用户姓名" prop="name">
        <el-input placeholder="请输入用户姓名" :maxLength="20" v-model="userInfo.name"></el-input>
      </el-form-item>
      <el-form-item label="证件类型" prop="certificatesType">
        <el-select placeholder="请选择证件类型" v-model="userInfo.certificatesType">
          <el-option :value="item.value" :label="item.name" v-for="item in dictionayData" :key="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="证件号码" prop="certificatesNo">
        <el-input placeholder="请输入证件号码" v-model="userInfo.certificatesNo"></el-input>
      </el-form-item>
      <el-form-item label="上传证件" prop="certificatesUrl">
        <el-upload
          ref="upload"
          list-type="picture-card"
          :limit="1"
          action="/api/oss/file/fileUpload?fileHost=userAuah"
          :on-exceed="exceedhandler"
          :on-success="successhandler"
          :on-preview="previewhandler"
          :on-remove="removehandler"
        >
          <img src="@/assets/images/auth_example.png" alt="" />
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="memberOfCertification">提交</el-button>
        <el-button @click="rewrite">重写</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 图片预览 -->
  <el-dialog title="图片预览" width="30%" v-model="imgVisible" @close="onClose">
    <img class="preview" :src="preview" alt="" />
  </el-dialog>
</template>

<style lang="scss" scoped>
.preview {
  width: 100%;
  height: 100%;
}
</style>
